<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                window.WebSocket = window.WebSocket || window.MozWebSocket;
                var websocket = new WebSocket('ws://127.0.0.1:9000', 'plain-websocket-protocol'); //Second param is custom protocol name, it is optional.
                websocket.onopen = function () {
                    $('h1').css('color', 'green');
                };
                websocket.onerror = function () {
                    $('h1').css('color', 'red');
                };
                websocket.onmessage = function (message) {
                    console.log(message.data);
                    $('div').append($('<p>', { text: message.data }));
                };
                
                $('button').click(function(e) {
                    e.preventDefault();
                    websocket.send($('input').val());
                    $('input').val('');
                });
            });
        </script>
        </head>
    <body>
        <h1>Test</h1>
        <form>
            <input type="text" />
            <button>Send</button>
        </form>
        <div></div>
    </body>
</html>
